<!-- 验证组件测试页面 -->
<template>
  <div class="test-container">
    <h1>验证组件测试</h1>
    
    <div class="test-section">
      <h2>基础验证</h2>
      <VerificationCode 
        @verify-success="handleSuccess('基础验证')"
        @verify-fail="handleFail('基础验证')"
        @status-change="handleStatusChange"
      />
    </div>
    
    <div class="test-section">
      <h2>简单难度 (仅加减)</h2>
      <VerificationCode 
        difficulty="easy"
        @verify-success="handleSuccess('简单验证')"
      />
    </div>
    
    <div class="test-section">
      <h2>困难难度 (加减乘除)</h2>
      <VerificationCode 
        difficulty="hard"
        auto-refresh="false"
        @verify-success="handleSuccess('困难验证')"
      />
    </div>
    
    <div class="test-section">
      <h2>无刷新按钮</h2>
      <VerificationCode 
        show-refresh="false"
        ref="noRefreshRef"
      />
      <button class="external-refresh" @click="refreshNoRefreshComponent">
        外部刷新按钮
      </button>
    </div>
    
    <div class="status-section">
      <h3>验证状态: <span :class="{ success: globalStatus }">
        {{ globalStatus ? '已验证通过' : '未验证' }}
      </span></h3>
      <div v-if="message" class="message">{{ message }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VerificationCode from '../components/common/VerificationCode.vue'

const noRefreshRef = ref<InstanceType<typeof VerificationCode>>()
const globalStatus = ref(false)
const message = ref('')

// 处理验证成功
const handleSuccess = (source: string) => {
  message.value = `${source} 验证成功！`
  console.log(`${source} 验证成功`)  
}

// 处理验证失败
const handleFail = (source: string) => {
  message.value = `${source} 验证失败，请重试`
  console.log(`${source} 验证失败`)
}

// 处理状态变化
const handleStatusChange = (status: boolean) => {
  globalStatus.value = status
  console.log('全局验证状态:', status)
}

// 刷新无刷新按钮的组件
const refreshNoRefreshComponent = () => {
  if (noRefreshRef.value) {
    noRefreshRef.value.generateNewEquation()
    message.value = '已刷新无刷新按钮的验证组件'
  }
}
</script>

<style scoped>
.test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

h2 {
  color: #444;
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

h3 {
  color: #555;
  font-size: 16px;
  margin-bottom: 10px;
}

.test-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-section {
  background-color: #e8f4fd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.success {
  color: #28a745;
  font-weight: 600;
}

.message {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border-left: 4px solid #667eea;
}

.external-refresh {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.external-refresh:hover {
  background-color: #218838;
}
</style>